<template>
  <div class="tabbar">
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="tabbar-list">
      <router-link to="/homepage" class="tabbar-item"><i class="home" :class="{active: getUrlType('#/homepage')}"></i><br><span>首页</span></router-link>
      <router-link to="/personal" class="tabbar-item" @click.native="isLogin()"><i class="personal" :class="{active: getUrlType('#/personal')}"></i><br><span>我的</span></router-link>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'tabbar',
    components: {
    },
    data: function() {
      return {}
    },
    methods: {
      getUrlType(url) {
        return location.href.indexOf(url) > -1
      },
      isLogin() {
        if (!window.IS_LOGINED) {
          return location.href = "/login.html";
        }
      }
    }
  }
</script>

<style lang="less">
  @import (reference) "~COMMON/common.less";

body {
  margin: 0px;
  padding: 0px;
  background-color: #f4f6f8;
  margin: 0 auto;
}
  .tabbar {
    .tabbar-list {
      position: fixed;
      left: 0px;
      bottom: 0px;
      width: 100%;
      height: 50px;
      display: table;
      border-top: 1px solid #EAEAEA;
      background-color: #fff;
      .isIphoneX({
        padding-bottom: 35px;
      });
      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .tabbar-item {
        vertical-align: middle;
        display: table-cell;
        text-align: center;
        color: #666;
        text-decoration: none;
        font-size: 11px;
        i {
          display: inline-block;
          width: 20px;
          height: 20px;
          background-size: 100%;
        }
        .home {
          background-image: url(~IMGS/home-icon.png);
          &.active {
            background-image: url(~IMGS/home-active.png);
          }
        }
        .personal {
          background-image: url(~IMGS/personal-icon.png);
          &.active {
            background-image: url(~IMGS/personal-active.png);
          }
        }
      }
      .router-link-exact-active, .router-link-active {
        color: #00A24D;
      }
    }
  }
</style>